<template>
	<PageContainer title="文章分类">
		<template #extra>
			<el-button type="primary"  @click="onAddChannel">添加分类</el-button>
		</template>
		
		<template #default>
			<!-- 高度自适应 -->
			<el-table v-loading="loading" :data="channelList" style="width: 100%;">
			    <el-table-column type="index" label="序号" width="100"></el-table-column>
			    <el-table-column prop="cate_name" label="分类名称"></el-table-column>
			    <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
			    <el-table-column label="操作" width="150">
			    <!-- row 就是 channelList 的一项， $index 下标 -->
			        <template #default="{row,$index}">
			          <el-button :icon="Edit" circle plain type="primary" @click="onEditChannel(row, $index)"></el-button>
			          <el-button :icon="Delete"  circle plain type="danger" @click="onDelChannel(row, $index)"></el-button>
			        </template>
			    </el-table-column>
			   <template #empty>
			        <el-empty description="没有数据"></el-empty>
			    </template>
			</el-table>
			<channel-edit ref="dialog" :getList='getChannelList' @success="onSuccess"></channel-edit>
		</template>
	</PageContainer>
</template>

<script setup>
	import PageContainer from '@/components/PageContainer.vue'
	import { artGetChannelsService, artDelChannelService } from '../../api/article'
	import { Edit, Delete } from '@element-plus/icons-vue'
	import { ref } from 'vue'
	import ChannelEdit from './components/ChannelEdit.vue'

	const channelList = ref([])
	const loading = ref(false)
	const dialog = ref()
	
	const getChannelList = async () => {
	  loading.value = true
	  const res = await artGetChannelsService()
	  channelList.value = res.data.data
	  loading.value = false
	}
	getChannelList()
	
	function onEditChannel(row){
		  dialog.value.open(row)
	}
	
	async function onDelChannel(row){
		await ElMessageBox.confirm('你确认要删除该分类么', '温馨提示', {
		    type: 'warning',
		    confirmButtonText: '确认',
		    cancelButtonText: '取消'
		})
		await artDelChannelService(row.id)
		ElMessage.success('删除成功')
		getChannelList()
	}
	
	function onAddChannel(){
		dialog.value.open({})
	}
	
	//子传父
	function onSuccess(){
		getChannelList()
		console.log(1)
	}
</script>

<style>
</style>